<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <title>经验方类别管理</title>
    <link rel="stylesheet" href="css/base.css">
    <style>
        html,
        body {
            /* height: 100%; */
            background: #f7f7f7;
            -webkit-user-select: none;
            user-select: none;
        }
        
        .ec_t {
            width: 100%;
            height: .76rem;
            background: #f7f7f7;
            line-height: .76rem;
            padding: 0 .2rem;
            font-size: .28rem;
            color: #666;
        }
        
        .add {
            width: 100%;
            height: 1.2rem;
            background: #eee;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            -webkit-align-items: center;
            justify-content: center;
            -webkit-justify-content: center;
            position: relative
        }
        
        .add input {
            width: 6rem;
            height: .8rem;
            background: #fff;
            border-radius: 4px;
            font-size: .3rem;
            padding: 0 1rem 0 .2rem;
        }
        
        .add span {
            font-size: .26rem;
            color: #fff;
            background: #b55444;
            position: absolute;
            right: .3rem;
            padding: .05rem .15rem;
            border-radius: 4px;
        }
        
        .ec_lists {
            width: 100%;
        }
        
        .ec_lists li {
            width: 100%;
            height: 1.2rem;
            background: #eee;
            margin-bottom: .1rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            -webkit-align-items: center;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            padding: 0 .2rem;
        }
        
        .ec_lists li span {
            display: block;
        }
        
        .ec_lists li .indexs {
            font-size: .36rem;
            color: #b55444;
        }
        
        .ec_lists li .name {
            width: 2.6rem;
            height: .8rem;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #999;
            font-size: .3rem;
            color: #999;
            line-height: .8rem;
            padding: 0 .2rem;
        }
        
        .ec_lists li .num {
            font-size: .3rem;
            color: #333;
            width: 1.9rem;
        }
        
        .ec_lists li .delete {
            width: .26rem;
            height: .26rem;
            background: url(images/the_close.png) no-repeat center center;
            background-size: .26rem .26rem;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="ec_t">
            添加类别
        </div>
        <div class="add">
            <input type="text" placeholder="请输入类别名称">
            <span>添加</span>
        </div>
        <div class="ec_t">
            当前类别
        </div>
        <div class="ec_lists">
            <ul>
                <li>
                    <span class="indexs">1</span>
                    <div class="name">外感</div>
                    <span class="num">13个经验方</span>
                    <span class="delete"></span>
                </li>
                <li>
                    <span class="indexs">2</span>
                    <div class="name">外感</div>
                    <span class="num">13个经验方</span>
                    <span class="delete"></span>
                </li>
                <li>
                    <span class="indexs">3</span>
                    <div class="name">外感</div>
                    <span class="num">3个经验方</span>
                    <span class="delete"></span>
                </li>
                <li>
                    <span class="indexs">4</span>
                    <div class="name">外感</div>
                    <span class="num">13个经验方</span>
                    <span class="delete"></span>
                </li>
                <li>
                    <span class="indexs">9</span>
                    <div class="name">外感</div>
                    <span class="num">13个经验方</span>
                    <span class="delete"></span>
                </li>
            </ul>
        </div>
    </div>
    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/index.js"></script>
    <script src="layer/layer.js"></script>

    <script>
        var experienceClass = {
            config: {
                str: ''
            },
            init: function() {
                var _this = this;
                _this.arrayLen();
                $(".add span").click(function() {
                    var val = $(".add input").val();
                    if (val) {
                        _this.config.str += "<li><span class='indexs'>0</span><div class='name'>" + val + "</div><span class='num'>0个经验方</span><span class='delete'></span></li>"
                        $(".ec_lists ul").append(_this.config.str);
                        _this.config.str = '';
                        $(".add input").val('')
                        _this.arrayLen();
                    } else {
                        layer.msg('请填写正确的类别名称！', {
                            time: 1000
                        });
                    }
                })
                $(".ec_lists").on("click", ".name", function() {
                    $(this).attr("contenteditable", "true").focus()
                });
                $(".ec_lists li .name").blur(function() {
                    $(this).attr("contenteditable", "false");
                });

                $(".ec_lists").on("click", ".delete", function() {
                    var val = $(this).siblings(".num").text();
                    val = Number(val.match(/\d+/g).join())
                    if (val > 0) {
                        layer.msg('您当前类别有经验方，无法删除', {
                            time: 1000
                        });
                    } else {
                        $(this).parent().remove();
                        _this.arrayLen();

                    }

                })
            },
            // 排序
            arrayLen: function() {
                var len = $(".ec_lists li").length;
                for (var i = 0; i < len; i++) {
                    $(".ec_lists ul li:eq(" + i + ") .indexs").html(i + 1)
                }
            }
        }
        experienceClass.init()
    </script>
</body>

</html>